<template>
    <div class="main-page">
        <div v-if="is_cut&&tips" class="tips">
            长按图片中间可【保存到手机】或【发送给朋友】
        </div>

        <div class="loading-page"
             v-if="!is_ready">
            <mu-circular-progress
                    style="margin-left: 45vw;margin-top: 20vh;"
                    color="rgb(181, 33, 45)"
                    :size="36"></mu-circular-progress>
        </div>


        <img ref="header" id='header' class="letter-img" src="@/assets/images/720temp.jpg"
             v-show="is_ready">
        <div class="letter letter-content"
             v-show="is_ready">
            <!--            称呼-->
            <span>{{invitation_content.header}}</span><br>
            <!--            内容-->
            <span v-for="v in invitation_content.content.split('\n')">
                &emsp;&emsp;{{v}}<br>
            </span>
            <!--            优秀毕业生祝贺-->
            <span class="letter-excellent"
                  style="color: rgb(181, 33, 45);" v-if="ceremony.is_nc !== null">
                &emsp;&emsp;{{invitation_content.excellent}}<br>
            </span>
            <span v-else>
                <br/>
            </span>
            <!--            时间地点-->
            <span class="extra-tips" v-if="ceremony.is_nc!== null">
                &emsp;&emsp;{{invitation_content.extra_ex_title}}<br></span>
            <div v-if="ceremony.is_nc!== null">
                <span v-for="v in invitation_content.extra_plan.split('\n')">
                &emsp;&emsp;{{v}}<br>
                </span>
            </div>
            <span class="extra-tips" v-if="ceremony.is_nc!== null">
                &emsp;&emsp;{{invitation_content.extra_title}}<br></span>
            <span v-for="v in invitation_content.plan.split('\n')">
                &emsp;&emsp;{{v}}<br>
            </span>
            <span v-if="ceremony.is_nc=== null">
                <br/>
                <br/>
                <br/>
            </span>

        </div>
        <!--        署名-->
        <div class="letter"
             style="text-align: right;margin-top: -3vh"
             v-show="is_ready">
            <div style="display:inline-block;text-align:center">
                  <span>
                {{invitation_content.footer.main}}
                </span>
                <br>
                <span>
                {{invitation_content.footer.date}}
            </span>
            </div>
        </div>
        <i class="clear-icon material-icons" v-show="is_cut" @click="hideCut">
            clear
        </i>
        <img class="cut_image" ref="cutIt" v-show="is_cut">
        <div class="mask" v-show="is_cut" @click="hideCut"></div>


        <mu-button style="position: fixed;bottom: 2vh;left: 2vw;color: rgb(255, 209, 141)"
                   fab
                   color="rgb(181, 33, 45)"
                   @click="cutImage"
                   v-show="is_ready&&btn_show">
            <mu-icon value="camera_alt"></mu-icon>
        </mu-button>
    </div>
</template>

<script>
    import html2canvas from 'html2canvas';

    export default {
        name: "Foryou",
        data() {
            return {
                timeout_handle: null,
                is_ready: false,
                first_in: true,
                is_cut: false,
                btn_show: true,
                tips: true,
                invitation_content: {
                    header: '尊敬的xxx同学家长：',
                    content: '您好！\n' +
                        '百川竞流终入海，万花争妍硕果来，感谢您和孩子当初选择吉珠。在这里，我们有幸见证了您孩子从懵懂到成熟、从青涩到自信的变化。如今，您的孩子已然学成，即将要身着学士服，接受学位授予，告别大学这座象牙塔，踏上新的征程，继续追逐自己的梦想。\n' +
                        '为此，我们诚挚邀请您参加我校2019届毕业生毕业典礼，见证孩子的这一重要时刻，相信您的陪伴必将成为他人生旅程上浓墨重彩的一笔。\n' +
                        '让我们共同祝愿xxx前程似锦！',
                    extra_title: "YYY2019届毕业生毕业典礼暨学士学位授予仪式",
                    extra_ex_title: "吉林大学珠海学院2019届毕业生毕业典礼暨学士学位授予仪式",
                    plan: '时间：date\n' +
                        '地点：place\n',
                    extra_plan: '时间：date',
                    excellent: '祝贺您的孩子被评为优秀毕业生!',
                    footer: {
                        main: '吉林大学珠海学院',
                        date: '2019年6月'
                    }

                },
                ceremony: null,
            }
        },
        created() {
            let ceremony = localStorage.getItem('jluzh_ceremony_v1')
            if (!ceremony) {
                this.$router.push('/jluzh_ceremony/login')
            } else {
                this.ceremony = JSON.parse(ceremony)
            }
            this.invitation_content.header = this.invitation_content.header.replace('xxx', this.ceremony.stu_name)
            this.invitation_content.content = this.invitation_content.content.replace(/xxx/igm, this.ceremony.stu_name)
            this.invitation_content.plan = this.invitation_content.plan.replace('date', this.ceremony.ac_ceremony_date)
                .replace('place', this.ceremony.ac_ceremony_place)
            this.invitation_content.extra_title = this.invitation_content.extra_title.replace('YYY', this.ceremony.ac_name)
            this.invitation_content.extra_plan = this.invitation_content.extra_plan.replace('date', this.ceremony.ac_ex_date)
        },
        mounted() {
            this.firstLoad()
            this.$nextTick(()=>{
                this.loadImage(this.$refs.header)
                    .then(() => {
                        this.is_ready = true
                    })
            })
        },
        methods: {
            hideCut() {
                this.btn_show = true
                this.is_cut = false
                this.tips = true
                this.$refs.cutIt.src = ''
                clearTimeout(this.timeout_handle)
            },
            loadImage(image_obj) {
                return new Promise((resolve, reject) => {
                    image_obj.onload = () => {
                        resolve()
                    }
                    image_obj.onerror = () => {
                        reject()
                    }
                })
            },
            cutImage() {
                this.btn_show = false
                html2canvas(document.body).then((canvas) => {
                    this.is_cut = true
                    this.timeout_handle = setTimeout(() => {
                        this.tips = false
                    }, 3000)
                    this.$refs.cutIt.src = canvas.toDataURL('image/jpeg', 1.0)
                });
            },
            //首次加载页面
            firstLoad() {
                let first = localStorage.getItem('jluzh_first_in')
                if (first) {
                    this.first_in = false
                    localStorage.setItem('jluzh_first_in', 'false')
                } else {
                    localStorage.setItem('jluzh_first_in', 'true')
                }

            }
        }
    }
</script>

<style>
    @import "../assets/fonts/simkai.css";

    .letter {
        position: relative;
        font-family: simkai, sans-serif;
        padding: 0 10px;
        top: 38vh;
        background-color: rgba(0, 0, 0, 0);
    }
    .letter, .letter-excellent{
        font-size: 2.022vh;
        line-height: 1.4;
    }


    .letter-img {
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: -1;

    }

    .cut_image {
        position: fixed;
        top: 1%;
        z-index: 99999;
        height: 100%;
        width: 100%;
        transform: scale(0.8);
    }
    .clear-icon{
        position: fixed;
        color: rgba(255,255,255,0.85);
        font-size: 6vw;
        top: 9.2vh;
        left:87vw;
        z-index: 100000;

    }


    .mask {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99997;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .tips {
        z-index: 99998;
        text-align: center;
        position: fixed;
        top: 4%;
        width: 100%;
        color: white;
    }

    .main-page {
        width: 100%;
        height: 100vh;
        color: black;
    }

    .loading-page {
        background-color: #f7bb8b;
        width: 100%;
        height: 100%;
    }

</style>